<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理系统 - {% block title %}{% endblock %}</title>
    <link href="{{ url_for('static', filename='css/all.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/tailwind.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">
    <script src="{{ url_for('static', filename='js/axios.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/sweetalert2.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    {% block head %}{% endblock %}
</head>
<body class="main-body">
<div class="app-container">
    <!-- 顶部展示区 -->
    <header class="top-header">
        <div class="header-left">
            <h1 class="system-name">管理系统</h1>
        </div>
        <div class="header-right">

            <div class="user-info">
                <span class="user-name" id="currentUser">{{ current_user.real_name }}</span>
                <div class="user-avatar">
                    <i class="fa fa-user-circle"></i>
                </div>
            </div>
            <a href="{{ url_for('admin_login.logout') }}" id="logoutBtn" class="logout-btn">
                <i class="fa fa-sign-out-alt"></i>退出登录
            </a>

        </div>
    </header>

    <!-- 主内容区 -->
    <div class="main-content-container">
        <!-- 侧边栏导航 -->
        <aside class="sidebar">
            <nav class="sidebar-nav">
                <ul class="nav-list">
                    <li class="nav-item has-submenu">
                        <a href="{{ url_for('album_info.index',id=album_info.get('id')) }}" class="nav-link {% if active_item == 'album' %}active{% endif %}">
                            <span class="nav-text">{{ album_info.get('title') }}</span>
                        </a>
                        <ul class="submenu active">
                            <li><a href="{{ url_for('album_episode_info.page',album_id=album_info.get('id')) }}"
                                   class="submenu-link {% if active_item == 'album_episode_info' %}active{% endif %}">剧集</a>
                            </li>
                            <li><a href="{{ url_for('video_library.page') }}"
                                   class="submenu-link {% if active_item == 'video_library' %}active{% endif %}">版本</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- 内容展示区（使用iframe加载独立HTML） -->
        <main class="content-area">
            <div class="content-header">
                <h2 class="page-title">{% block page_title %}{% endblock %}</h2>
                {% block header_actions %}{% endblock %}
            </div>
            {% with messages = get_flashed_messages(with_categories=true,category_filter=("page_success","page_error")) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="mb-4 p-4 rounded {% if category == 'page_success' %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            {% block body %}{% endblock %}
        </main>
        <!-- 预览模态框 -->
        <div id="previewModal"
             class="fixed inset-0 bg-black bg-opacity-75 hidden z-50 flex items-center justify-center p-4">
            <div class="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden mt-xxl-5">
                <div class="flex justify-between items-center p-6 border-b">
                    <h3 class="text-xl font-bold text-gray-800" id="previewTitle">
                        预览
                    </h3>
                    <button onclick="closePreview()" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <i class="fas fa-times text-2xl"></i>
                    </button>
                </div>
                <div class="p-6 overflow-auto">
                    <div class="text-center">
                        <img id="previewImg" class="max-w-full max-h-[70vh] mx-auto rounded-lg shadow-lg hidden">
                        <video id="previewVideo" class="max-w-full max-h-[70vh] mx-auto rounded-lg hidden" controls>
                            您的浏览器不支持视频播放。
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    // 键盘事件支持
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            closePreview();
        }
    });

    // 点击模态框背景关闭
    document.getElementById('previewModal').addEventListener('click', function (e) {
        if (e.target === this) {
            closePreview();
        }
    });
</script>
</body>
</html>
